<template>
  <div class="home-page">
    <!-- 顶部弧形渐变背景 -->
    <div class="header-bg">
      <svg viewBox="0 0 390 220" class="header-svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="headerGradient" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="rgb(0,90,255)" />
            <stop offset="100%" stop-color="rgb(0,90,255)" />
          </linearGradient>
        </defs>
        <path d="M0,0 H390 V160 Q195,220 0,160 Z" fill="url(#headerGradient)" />
      </svg>
      <!-- 顶部内容 -->
      <div class="header-content">
        <img class="avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="头像" />
        <div class="user-info">
          <div class="greeting">Hi 毛蛋，</div>
          <div class="welcome">欢迎回来！</div>
        </div>
        <div class="header-icons">
          <div class="icon-circle">
            <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="#fff"/></svg>
            <span class="badge">2</span>
          </div>
          <div class="icon-circle">
            <svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="#fff"/></svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 宫格功能区 -->
    <div class="feature-card">
      <div class="feature-grid">
        <div class="feature-item" v-for="item in features" :key="item.text" @click="handleFeatureClick(item)">
          <div class="feature-icon">
            <img 
              v-if="item.icon === 'hospital'" 
              src="./v2_synt17.png" 
              alt="就诊"
              width="32"
              height="32"
            />
            <img 
              v-else-if="item.icon === 'family'" 
              src="./v2_synt1z.png" 
              alt="家庭访视"
              width="32"
              height="32"
            />
            <img 
              v-else-if="item.icon === 'video'" 
              src="./v2_synt07.png" 
              alt="视频咨询"
              width="32"
              height="32"
            />
            <img 
              v-else-if="item.icon === 'pharmacy'" 
              src="./v2_synszl.png" 
              alt="药店"
              width="32"
              height="32"
            />
            <img 
              v-else-if="item.icon === 'symptom'" 
              src="./v2_synsz2.png" 
              alt="疾病症状"
              width="32"
              height="32"
            />
            <img 
              v-else-if="item.icon === 'covid'" 
              src="./v2_synsyh.png" 
              alt="新冠病毒"
              width="32"
              height="32"
            />
          </div>
          <div class="feature-text">{{ item.text }}</div>
        </div>
      </div>
    </div>

    <!-- 科室区 -->
    <div class="section">
      <div class="section-header">
        <span>科室</span>
        <a href="#" class="more">查看全部</a>
      </div>
      <div class="dept-list">
        <div class="dept-item" v-for="dept in depts" :key="dept.name">
          <img 
            :src="dept.icon" 
            alt=""
            width="38"
            height="38"
          />
          <div class="dept-name">{{ dept.name }}</div>
          <div class="dept-desc">{{ dept.desc }}</div>
        </div>
      </div>
    </div>

    <!-- 热门医院区 -->
    <div class="section">
      <div class="section-header">
        <span>附近医院</span>
        <a href="#" class="more">查看全部</a>
      </div>
      <div class="hospital-list">
        <div v-if="loadingHospitals" class="loading">正在加载附近医院...</div>
        <template v-else>
          <div class="hospital-card" v-for="h in hospitals" :key="h.id">
            <div class="hospital-img-wrap">
              <img 
                v-if="h.photos && h.photos.length" 
                :src="h.photos[0].url" 
                alt="医院图片"
                width="100%"
                height="110"
              />
              <img 
                v-else 
                src="./9957.jpg_wh860.jpg" 
                alt="医院默认图片"
                width="100%"
                height="110"
              />
            </div>
            <div class="hospital-info">
              <div class="hospital-name">{{ h.name }}</div>
              <div class="hospital-desc">{{ h.address }}</div>
              <div class="hospital-type">{{ h.type || h.tag || '综合医院' }}</div>
              <div class="hospital-rate">
                <span class="score">{{ getHospitalRating(h) }}</span>
                <span class="rate-count" v-if="getHospitalRatingCount(h)">({{ getHospitalRatingCount(h) }}评价)</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- 热门医生区 -->
    <div class="section">
      <div class="section-header">
        <span>热门医生</span>
        <a href="#" class="more">查看全部</a>
      </div>
      <div class="doctor-list">
        <div class="doctor-card" v-for="d in doctors" :key="d.name">
          <img 
            :src="d.avatar" 
            alt=""
            width="48"
            height="48"
            class="avatar-img"
          />
          <div class="doctor-info">
            <div class="doctor-name">{{ d.name }}</div>
            <div class="doctor-dept">{{ d.dept }}</div>
            <div class="doctor-rate">
              <i class="iconfont icon-star"></i>
              <span>{{ d.rate }}</span>
              <span class="rate-count">({{ d.count }})</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="tabbar-new">
      <div
        v-for="(tab, idx) in tabbar"
        :key="tab.icon"
        :class="['tabbar-item', { active: tab.icon === 'home' }]"
        @click="handleTabClick(tab.icon)"
      >
        <span class="icon-wrap">
          <svg v-if="tab.icon === 'home'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'home' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 11.5L12 4l9 7.5V20a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4h-2v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11.5z"/>
          </svg>
          <svg v-else-if="tab.icon === 'msg'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'msg' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          </svg>
          <svg v-else-if="tab.icon === 'calendar'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'calendar' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="4" width="18" height="18" rx="4"/>
            <path d="M16 2v4M8 2v4M3 10h18"/>
          </svg>
          <span v-else-if="tab.icon === 'bell'" class="icon-bell-wrap">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'bell' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M18 16v-5a6 6 0 0 0-12 0v5a2 2 0 0 1-2 2h16a2 2 0 0 1-2-2z"/>
              <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
            </svg>
            <span class="dot"></span>
          </span>
          <svg v-else-if="tab.icon === 'user'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'user' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="8" r="4"/>
            <path d="M4 20v-1a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v1"/>
          </svg>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const features = [
  { icon: 'hospital', text: '就诊' },
  { icon: 'family', text: '医院访视' },
  { icon: 'video', text: '视频咨询' },
  { icon: 'pharmacy', text: '药店' },
  { icon: 'symptom', text: '疾病症状' },
  { icon: 'covid', text: '新冠病毒' },
]
const depts = [
  { icon: 'https://img.icons8.com/color/48/000000/doctor-male.png', name: '一般护理', desc: '47 医院' },
  { icon: 'https://img.icons8.com/color/48/000000/baby.png', name: '儿科', desc: '24 医院' },
  { icon: 'https://img.icons8.com/color/48/000000/heart-with-pulse.png', name: '心脏病学', desc: '18 医院' },
]

const gaodeKey = 'e1f464825775ab939a6421df5754e340';
const hospitals = ref<any[]>([]);
const loadingHospitals = ref(false);

onMounted(() => {
  if (navigator.geolocation) {
    loadingHospitals.value = true;
    navigator.geolocation.getCurrentPosition(
      pos => {
        const { latitude, longitude } = pos.coords;
        fetch(`https://restapi.amap.com/v3/place/around?key=${gaodeKey}&location=${longitude},${latitude}&keywords=医院&types=090000|090100|090200&radius=3000&offset=5&page=1&extensions=all`)
          .then(res => res.json())
          .then(data => {
            console.log('高德返回数据', data);
            if (data.pois) {
              hospitals.value = data.pois;
            }
            loadingHospitals.value = false;
          });
      },
      err => {
        loadingHospitals.value = false;
        alert('无法获取定位，无法展示附近医院');
      }
    );
  } else {
    alert('当前浏览器不支持定位');
  }
});
const doctors = [
  { avatar: 'https://randomuser.me/api/portraits/men/11.jpg', name: '陈晓波', dept: '儿科', rate: 4.8, count: 456 },
  { avatar: 'https://randomuser.me/api/portraits/women/12.jpg', name: '夏点点', dept: '儿科', rate: 4.8, count: 456 },
  { avatar: 'https://randomuser.me/api/portraits/men/13.jpg', name: '夏点点', dept: '儿科', rate: 4.8, count: 456 },
]
const tabbar = [
  { icon: 'home' },
  { icon: 'msg' },
  { icon: 'calendar' },
  { icon: 'bell' },
  { icon: 'user' },
]

const getHospitalRating = (hospital: any) => {
  // 暂时返回默认值，避免NaN问题
  return '暂无评分';
};

const getHospitalRatingCount = (hospital: any) => {
  // 暂时返回空值
  return '';
};

const handleFeatureClick = (feature: any) => {
  if (feature.icon === 'hospital') {
    router.push('/department-select')
  } else if (feature.icon === 'family') {
    router.push('/dashboard')
  } else if (feature.icon === 'symptom') {
    router.push('/disease-symptoms')
  } else if (feature.icon === 'pharmacy') {
    router.push('/pharmacy')
  } else {
    console.log('点击功能:', feature.text)
  }
};

const handleImageError = (event: any) => {
  // 图片加载失败时的处理
  console.log('图片加载失败:', event.target.src);
};

// 添加导航栏点击处理函数
const handleTabClick = (icon: string) => {
  switch (icon) {
    case 'home':
      // 当前页面
      break;
    case 'msg':
      router.push('/zxl');
      break;
    case 'calendar':
      router.push('/time-select');
      break;
    case 'bell':
      router.push('/lhx-patient-chat');
      break;
    case 'user':
      router.push('/medical-home');  // 用户图标跳转到 MedicalHome 页面
      break;
  }
};
</script>

<style lang="scss" scoped>
@use '../../styles/_mixins' as mixins;

.home-page {
  min-height: 100vh;
  background: #f6f8fc;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  padding-bottom: 88px;
}

// 顶部弧形渐变
.header-bg {
  position: relative;
  width: 100%;
  height: 150px;
  
  .header-svg {
    position: absolute;
    left: 0; 
    top: 0;
    width: 100%;
    height: 220px;
    z-index: 1;
    display: block;
  }
  
  .header-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    padding: 32px 20px 0 20px;
    
    .avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid #fff;
      object-fit: cover;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .user-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      
      .greeting {
        font-size: 18px;
        font-weight: 600;
        color: #fff;
        margin-bottom: 2px;
        white-space: nowrap;
      }
      
      .welcome {
        font-size: 14px;
        color: #e6f7ff;
        opacity: 0.85;
      }
    }
    
    .header-icons {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto;
      
      .icon-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255,255,255,0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        box-shadow: 0 2px 8px rgba(24,119,242,0.08);
        
        .badge {
          position: absolute;
          top: -2px;
          right: -2px;
          background: #ff4d4f;
          color: #fff;
          border-radius: 10px;
          font-size: 12px;
          padding: 0 5px;
          min-width: 16px;
          text-align: center;
          line-height: 16px;
          border: 2px solid #fff;
        }
      }
    }
  }
}

// 宫格功能区
.feature-card {
  margin: -40px 16px 18px 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(24,119,242,0.08);
  padding: 18px 0 6px 0;
  position: relative;
  z-index: 3;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    .feature-icon {
      width: 32px;
      height: 32px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .feature-text {
      font-size: 14px;
      color: #1877F2;
      font-weight: 500;
      letter-spacing: 0.5px;
    }
  }
}

// 公共区块样式
.section {
  margin: 0 16px 18px 16px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(58,122,254,0.06);
  padding: 14px 0 10px 0;
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 8px 16px;
    font-size: 16px;
    font-weight: bold;
    .more {
      font-size: 13px;
      color: #3a7afe;
      font-weight: normal;
      text-decoration: none;
    }
  }
}

// 科室区
.dept-list {
  display: flex;
  gap: 12px;
  padding: 0 16px;
  .dept-item {
    flex: 1;
    background: #f6f8fc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 10px 0;
    img {
      width: 38px;
      height: 38px;
      margin-bottom: 6px;
      object-fit: contain;
    }
    .dept-name {
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    .dept-desc {
      font-size: 12px;
      color: #888;
    }
  }
}

// 热门医院区
.hospital-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 0 16px 12px 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  &::-webkit-scrollbar { height: 6px; background: #f6f8fc; }
  &::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 3px; }
  .loading {
    text-align: center;
    padding: 20px 0;
    color: #888;
  }
  .hospital-card {
    flex: 0 0 220px;
    min-width: 220px;
    max-width: 220px;
    margin-bottom: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(24,119,242,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    .hospital-img-wrap {
      width: 100%;
      height: 110px;
      background: #f6f8fc;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
      }
      .img-placeholder {
        color: #bbb;
        font-size: 14px;
      }
    }
    .hospital-info {
      padding: 12px 14px 10px 14px;
      display: flex;
      flex-direction: column;
      .hospital-name {
        font-size: 16px;
        font-weight: 500;
        color: #222;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hospital-desc {
        font-size: 13px;
        color: #888;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hospital-type {
        font-size: 12px;
        color: #1ec8ff;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hospital-rate {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #ffb400;
        .score {
          color: #ffb400;
          font-weight: 500;
          margin-right: 4px;
        }
        .rate-count {
          color: #888;
          font-size: 12px;
        }
      }
    }
  }
}

// 热门医生区
.doctor-list {
  display: flex;
  gap: 12px;
  padding: 0 16px;
  overflow-x: auto;
  .doctor-card {
    min-width: 110px;
    background: #f6f8fc;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(58,122,254,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 8px 0;
    img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin-bottom: 6px;
      border: 2px solid #f0f8ff;
      object-fit: cover;
    }
    .doctor-info {
      text-align: center;
      .doctor-name {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 2px;
      }
      .doctor-dept {
        font-size: 12px;
        color: #888;
        margin-bottom: 2px;
      }
      .doctor-rate {
        font-size: 13px;
        color: #ffb400;
        .iconfont {
          font-size: 14px;
        }
        .rate-count {
          color: #888;
          margin-left: 2px;
        }
      }
    }
  }
}

.tabbar-new {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0 auto;
  width: 92vw;
  max-width: 420px;
  height: 56px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 2px 16px 0 rgba(24,119,242,0.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}
.tabbar-new .tabbar-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100%;
  cursor: pointer;
  transition: color 0.2s;
}
.tabbar-new .tabbar-item.active svg {
  stroke: #1877F2;
}
.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.icon-bell-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-bell-wrap .dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #ff4d4f;
  border-radius: 50%;
  border: 2px solid #fff;
}
</style> 